<template>
  <div class="bg">
    <div class="left">
      <div class="left-item">
        <div class="title">
          <div>
            <!-- <i class="iconfont icon-duoyun" /> -->
            <img src="../assets/images/icon_duoyun.png" alt="" srcset="" class="icon" />
            气象信息
          </div>
          <i class="iconfont icon-guanbi" />
        </div>
        <div class="time-box">
          <div class="time">2025年4月17日14:07:28</div>
          <div class="duoyun">
            <!-- <i class="iconfont icon-duoyun" /> -->

            <img src="../assets/images/icon_duoyun.png" alt="" srcset="" class="icon" />
            多云
          </div>
        </div>
        <div class="iconList">
          <div class="iconList-item" v-for="(item, index) in state.weather" :key="index">
            <!-- <i :class="`iconfont ${item.icon}`" :style="`color:${item.color}`"></i> -->
            <img :src="item.img" alt="" srcset="" class="img" />
            <div class="text">
              <div v-if="item.value" class="tip" :style="`color:${item.color}`">
                <div class="value">{{ item.value }}</div>
                <div class="depart">{{ item.depart }}</div>
              </div>
              <div>{{ item.text }}</div>
            </div>
          </div>
        </div>
      </div>
      <!-- 测点统计 -->
      <div class="left-item">
        <div class="title">
          <div>
            <!-- <i class="iconfont icon-jurassic_pie-chart" /> -->
            <img src="../assets/images/icon_饼图.png" alt="" srcset="" class="icon" /> 测点统计
          </div>
          <i class="iconfont icon-guanbi" />
        </div>
        <div class="chart">
          <!-- <div id="chart-bar"></div> -->
          <e-charts class="chart" :option="option" />
        </div>
      </div>
      <!-- 施工阶段 -->
      <div class="left-item">
        <div class="title">
          <div class="title-top">
            <!-- <i class="iconfont icon-jieduan" /> -->
            <img src="../assets/images/icon_储存器.png" alt="" srcset="" class="icon" /> 施工阶段
          </div>
          <i class="iconfont icon-guanbi" />
        </div>
        <div class="chart">
          <div style="text-align: right">
            <!-- <i class="iconfont icon-jieduantongji" /> -->
            <img src="../assets/images/icon_挖掘.png" alt="" srcset="" class="icon" /> 预览阶段
          </div>
          <e-charts class="chart" :option="jieduanOption" />
        </div>
      </div>
    </div>

    <div class="rigth">
      <div class="fxed">
        <div class="box">
          <img src="../assets/images/icon_晴天.png" alt="" srcset="" class="icon_fxed" />
          <img src="../assets/images/icon_饼图.png" alt="" srcset="" class="icon_fxed" />
          <img src="../assets/images/icon_储存器.png" alt="" srcset="" class="icon_fxed" />
        </div>
        <img src="../assets/images/icon_机器人.png" alt="" srcset="" class="icon_fxed" />
        <img src="../assets/images/icon_挖掘.png" alt="" srcset="" class="icon_fxed" />
        <img src="../assets/images/icon_查找.png" alt="" srcset="" class="icon_fxed" />
        <img src="../assets/images/icon_目标.png" alt="" srcset="" class="icon_fxed" />
        <img src="../assets/images/icon_视频.png" alt="" srcset="" class="icon_fxed" />
      </div>
    </div>
    <div class="click" @click="state.dialogVisible = true"></div>

    <el-dialog
      v-model="state.dialogVisible"
      title="基本信息"
      width="30%"
      :before-close="() => (state.dialogVisible = false)"
    >
      <div class="content">
        <e-charts style="width: 40rem; height: 30rem;" :option="options" />
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="state.dialogVisible = false">关闭</el-button>
          <!-- <el-button type="primary" @click="state.dialogVisible = false"> 确定 </el-button> -->
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed } from 'vue'

const state = reactive({
  dialogVisible: false,
  weather: [
    {
      icon: 'icon-daqiwendu',
      text: '温度',
      value: '29',
      depart: '℃',
      color: '#f5c203',
      img: '/src/assets/images/icon_wendu.png',
    },
    {
      icon: 'icon-wenshidu',
      text: '湿度',
      value: '83.0',
      depart: '%RH',
      color: '#0284f2',
      img: '/src/assets/images/icon_shidu.png',
    },
    {
      icon: 'icon-fengsu',
      text: '风速',
      value: '83.0',
      depart: 'm/s',
      color: '#06dba3',
      img: '/src/assets/images/icon_fengsu.png',
    },
    {
      icon: 'icon-fengxiang',
      text: '风向',
      value: '278.0',
      depart: '°',
      color: '#06e9b9',
      img: '/src/assets/images/icon_fengxiang.png',
    },
  ],
  data: [
    { value: 131, name: '在线', color: '#3fffad' },
    { value: 0, name: '待安装', color: '#34accf' },
    { value: 110, name: '已拆除', color: '#9baafe' },
    { value: 150, name: '离线', color: '#93a2b2' },
  ],
  jieduanData: [
    { value: 1048, name: 'Search Engine', color: '#3fffad' },
    { value: 735, name: 'Direct', color: '#34accf' },
    { value: 580, name: 'Email', color: '#9baafe' },
    { value: 484, name: 'Union Ads', color: '#93a2b2' },
    { value: 300, name: 'Video Ads', color: '#408970' },
  ],
})
//模拟数据value的字段对应Y轴，name字段对应X轴
const options = computed(() => {
  return {
    xAxis: {
      type: 'category',
      data: state.data.map((v) => v.name),
      axisLabel: {
        show: true,
        textStyle: {
          color: '#000', // 字体颜色
          fontSize: 12, // 字体大小
        },
      },
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        interval: 0,
        rotate: 30, //设置标签倾斜
        textStyle: {
          //改变刻度字体样式
          color: '#000',
          fontSize: 12,
        },
      },
      // 显示轴线
      axisLine: {
        show: true,
      },
      // 隐藏刻度线
      axisTick: {
        show: true,
      },
      splitLine: {
        show: false,
      },
      interval: 30,
      min: 0,
      max: 150,
    },
    series: [
      {
        type: 'line',
        // type: 'bar',
        data: state.data.map((v) => v.value),
        barWidth: 15,
        itemStyle: {
          color: (params: any) => {
            return state.data[params.dataIndex].color
          },
        },
        label: {
          show: true,
          position: 'top',
          textStyle: {
            fontSize: 12, // 标签字体大小
            color: 'inherit',
          },
        },
      },
    ],
  }
})
//模拟数据value的字段对应Y轴，name字段对应X轴
const option = computed(() => {
  return {
    xAxis: {
      type: 'category',
      data: state.data.map((v) => v.name),
      axisLabel: {
        show: true,
        textStyle: {
          color: '#fff', // 字体颜色
          fontSize: 12, // 字体大小
        },
      },
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        interval: 0,
        rotate: 30, //设置标签倾斜
        textStyle: {
          //改变刻度字体样式
          color: '#fff',
          fontSize: 12,
        },
      },
      // 显示轴线
      axisLine: {
        show: true,
      },
      // 隐藏刻度线
      axisTick: {
        show: true,
      },
      splitLine: {
        show: false,
      },
      interval: 30,
      min: 0,
      max: 150,
    },
    series: [
      {
        type: 'bar',
        data: state.data.map((v) => v.value),
        barWidth: 15,
        itemStyle: {
          color: (params: any) => {
            return state.data[params.dataIndex].color
          },
        },
        label: {
          show: true,
          position: 'top',
          textStyle: {
            fontSize: 12, // 标签字体大小
            color: 'inherit',
          },
        },
      },
    ],
  }
})
const newTotal = state.jieduanData.reduce((sum, item) => sum + item.value, 0)

const jieduanOption = computed(() => {
  return {
    title: {
      text: `{a|${newTotal}}\n{b|阶段总量} `, // 这里显示总数
      left: 'center',
      top: 'center',
      textStyle: {
        rich: {
          a: {
            fontSize: 15,
            color: '#f2c757',
            padding: [5, 0, 0, 0],
          },
          b: {
            fontSize: 10,
            color: '#fff',
          },
        },
      },
    },
    series: [
      {
        radius: ['30%', '40%'],
        center: ['50%', '50%'], // 饼图位置
        type: 'pie',
        data: state.jieduanData,
        itemStyle: {
          color: (params: any) => {
            return state.jieduanData[params.dataIndex].color
          },
        },
        label: {
          show: true,
          // 关键配置：去除阴影
          color: '#fff',
          formatter: '{b}\n{d}%',
          fontSize: 12,
        },
        labelLayout: {
          verticalAlign: 'bottom',
        },
        labelLine: {
          show: true,
          length: 10,
          length2: 15,
        },
        emphasis: {
          label: {
            show: true, // 高亮时是否显示标签
            fontSize: '14', // 高亮时标签的字体大小
            color: '#fff', // 高亮时标签的颜色
          },
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
          },
        },
      },
    ],
  }
})
</script>
<style lang="scss" scoped>
.bg {
  background: url('@/assets/images/bg.png') no-repeat center center fixed;
  background-size: cover;
  height: 100vh;
  width: 100vw;
  font-size: 1rem;
}
.left {
  position: absolute;
  top: 0;
  // left: 0;
  padding: 1rem;
  height: 100%;
  color: #fff;
  z-index: 3;
  .left-item {
    width: 23rem;
    height: 19rem;
    padding: 1rem;
    margin-bottom: 1.5rem;
    border-radius: 0.5rem;
    background-color: rgba($color: #000, $alpha: 0.1);
    .time-box {
      display: flex;
      justify-content: space-between;
      line-height: 2.5rem;
      .time {
        font-size: 1rem;
      }
    }
    .chart {
      height: 100%;
    }
  }
  .title {
    display: flex;
    justify-content: space-between;
    font-size: 1rem;
    line-height: 1.5rem;
  }
}
.rigth {
  position: absolute;
  top: 0;
  right: 0;
  padding: 1rem;
  .fxed {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #333753;
    // padding: 1rem;
    .icon_fxed {
      width: 1rem;
      height: 1rem;
      margin: 0.5rem 0;
    }
  }
  .box {
    display: flex;
    flex-direction: column;
    background-color: #008fff;
    padding: 0.5rem;
  }
}
.iconList {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;

  .iconList-item {
    display: flex;
    width: 46%;
    align-items: center;
    font-size: 0.8rem;
    margin: 0.5rem 0;
    .tip {
      display: flex;
      justify-content: center;
      align-items: baseline;
    }
    .value {
      font-size: 1.5rem;
      margin-right: 0.2rem;
    }
    .iconfont {
      font-size: 3rem;
      color: #fff;
    }
    .text {
      margin-left: 0.5rem;
    }
  }
}
.img {
  width: 4rem;
  height: 4rem;
  .depart {
    font-size: 0.5rem;
    margin-left: 0.5rem;
  }
}
.icon {
  width: 1rem;
  height: 1rem;
  margin-right: 0.2rem;
}
.duoyun {
  display: flex;
  align-items: center;
}
.click {
  position: fixed;
  cursor: pointer;
  height: 40rem;
  width: 40rem;
  // background: #000;
  left: 50%;
  transform: translateX(-50%);
}
.content {
  width: 100%;
  height: 30rem;
}
</style>
